<html xmlns="http://www.w3.org/1999/xhtml">
<?php 
	if(!isset($_SESSION['userIdZing']))
	{
		session_start(); 
	}
	if(isset($_SESSION['userIdZing']))
	{
	?>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="./css/bootstrap.css" rel="stylesheet">

	<link href="./css/grid.css" rel="stylesheet">
	<link href="./css/carousel.css" rel="stylesheet">
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	
	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCyw4hBsEy19nZUvIXsJvPT-GufPuX-7SY&sensor=false"></script>
	<script >
		var iCountStt = 0;
	</script>
	<title>ZiGo</title>
</head>
<body>
<div id="zigo_container">
	<?php
		include ('/view/menutop.php');
	?>
	<div id='place'>
		
	</div>
	<div class='title'>BÌNH LUẬN</div>
	<div id='comments'>
	</div>
	<div align="center" >
		<img id="loading" src="images/ajax_load.gif" alt="loading" style="visibility: hidden" />
        <button type='button' class='btn btn-primary' style="width: 520px;" onclick="loadMoreComment()">XEM THÊM</button>            
	</div>
</div>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/underscore.min.js"></script>
	<script type="text/javascript" src="js/backbone.min.js"></script>
	<script type="text/javascript" src="js/model/placedetail.js"></script>
	<script type="text/javascript" src="js/place.js"></script>
	
	<script type='text/javascript'>
		function showPosition(lat, lon)
		{
			console.log (lat,lon);
			latlon=new google.maps.LatLng(lat, lon)
			mapholder=document.getElementById('place-map')
			mapholder.style.height='300px';
			mapholder.style.width='600px';
			var myOptions={
			center:latlon,
			zoom:15,
			mapTypeId:google.maps.MapTypeId.ROADMAP,
			mapTypeControl:false,
			navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
			};
			var map=new google.maps.Map(document.getElementById("place-map"),myOptions);
			var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
			
		}
	</script>
	
	
	<script type='text/template' id='place-item'>
		<div class='place-header'>
			<div class='place-header-left'>
				<h2><%= place_name%></h2>
			</div>
			<div class='place-header-right'>
				<button type='button' class='btn btn-danger' style="width: 120px; margin-left: 10px; visibility: hidden;" onclick="">Viết bình luận</button>
				<button type='button' class='btn btn-info' style="width: 120px; visibility: hidden;" onclick="">Sửa thông tin</button>
			</div>
		</div>
		<div class='place-body'>
			<div class='place-avatar avatar'>
				<img src='<%=url_avatar%><%=name_avatar%>' style='width:200px;'/>
			</div>
			<div class='place-info'>
				<div class='address'>
					<span>Địa chỉ: </span><strong><span><%= address%></span> - <span><%= district_name%></span></strong>
				</div>
				<div class='tel' style="margin-top: 10px;">
					<span>Điện thoại: <%= phone_number%></span>
				</div>
				<div class='fax'>
					<span>Fax: <%= fax_number%></span>
				</div>
				<div class='email'>
					<span>Email: <%= email%></span>
				</div>
				<div class='website'>
					<span>Website: <%= website%></span>
				</div>
				
			</div>
		</div>
		<div class='place-container'>
			<div class='map-box'>
				<div id='place-map' class='place-map'>
				</div>
			</div>
			<div class='place-detail'>
				<div class='place-time'>
					<span>Giờ mở cửa: </span><strong><span><%= open_time%> - </span><span><%= close_time%></span></strong>
				</div>
				<div class='place-price'>
					<span>Giá : </span><strong><span><%= lowest_price%> - </span><span><%= hightest_price%></span></strong>
				</div>
				<div class='place-description'>
					<span><i><%= description%></i></span>
				</div>
			</div>
		</div>
		<script type="text/javascript">showPosition(<%= latitude%>,<%= longitude%>)</script>
	</script>
	
	<script type="text/javascript">
		function getComment()
		{
			var content = "";
			$.ajax({
								type: "GET",
								url: "http://localhost/zigo/WebservicePHP/get_comment_place.php",
								data: {
									'place_id':<?php echo $_GET['place_id']?>
								},
								dataType: 'json',
								success: function(data){
									if(parseInt(data)!=0){
										if(data.success == '1'){
											
											if (data.comment instanceof Array) {
												var tempArray = data.comment;
												if(tempArray.length > 4){
													for (var i = 0; i<tempArray.length-1; i++){
														content = content.concat("<div class='user-comment' id='user-comment'>");
														content = content.concat("<div class='left-comment'>");
														content = content.concat("<div style='float: left; width:80px; height:80px; overflow: hidden;' class='avatar'>");
														content = content.concat("<img src='",data.comment[i].user_avatar_zing,"' class='imgnewfeed' style='height:80px; width:80px; margin: 0px;' alt='' />");	
														content = content.concat("</div>");
														content = content.concat("</div>");
														content = content.concat("<div class='right-comment'> style='width: 720px;' ");
														content = content.concat("<div class='comment-header'>");
														content = content.concat("<h4>",data.comment[i].user_display_name,"</h4>");
														content = content.concat("<span>",data.comment[i].time_comment,"</spam>");
														content = content.concat("</div>");
														content = content.concat("<div class='comment-detail'>");
														content = content.concat("<p>",data.comment[i].detail_comment,"</p>");
														
														content = content.concat("</div>");
														content = content.concat("</div>");
														content = content.concat("</div>");
														iCountStt++;
													}
													
												}else{
													for (var i = 0; i<tempArray.length; i++){
														content = content.concat("<div class='user-comment' id='user-comment'>");
														content = content.concat("<div class='left-comment'>");
														content = content.concat("<div style='float: left; width:80px; height:80px; overflow: hidden;' class='avatar'>");
														content = content.concat("<img src='",data.comment[i].user_avatar_zing,"' class='imgnewfeed' style='height:80px; width:80px; margin: 0px;' alt='' />");	
														content = content.concat("</div>");
														content = content.concat("</div>");
														content = content.concat("<div class='right-comment' style='width: 720px;'>");
														content = content.concat("<div class='comment-header'>");
														content = content.concat("<h4>",data.comment[i].user_display_name,"</h4>");
														content = content.concat("<span>",data.comment[i].time_comment,"</spam>");
														content = content.concat("</div>");
														content = content.concat("<div class='comment-detail'>");
														content = content.concat("<p>",data.comment[i].detail_comment,"</p>");
														
														content = content.concat("</div>");
														content = content.concat("</div>");
														content = content.concat("</div>");
														iCountStt++;
													}
												}
											}
										}else{
										}
										
									}
									$('#comments').html(content);
									reSizeHeigh();
								},
								error:function(data){
									console.log("fail");
								}
							});
		}
		function loadMoreComment()
		{
			$('#loading').css('visibility','visible');
			var content = "";
			$.ajax({
								type: "GET",
								url: "http://localhost/zigo/WebservicePHP/get_comment_place.php",
								data: {
									'place_id':<?php echo $_GET['place_id']?>,
									'state':'loadMore',
									'sttComment': iCountStt
								},
								dataType: 'json',
								success: function(data){
									if(parseInt(data)!=0){
										if(data.success == '1'){
											
											if (data.comment instanceof Array) {
												var tempArray = data.comment;
													for (var i = 0; i<tempArray.length; i++){
														content = content.concat("<div class='user-comment' id='user-comment'>");
														content = content.concat("<div class='left-comment'>");
														content = content.concat("<div style='float: left; width:80px; height:80px; overflow: hidden;' class='avatar'>");
														content = content.concat("<img src='",data.comment[i].user_avatar_zing,"' class='imgnewfeed' style='height:80px; width:80px; margin: 0px;' alt='' />");	
														content = content.concat("</div>");
														content = content.concat("</div>");
														content = content.concat("<div class='right-comment'>");
														content = content.concat("<div class='comment-header'>");
														content = content.concat("<h4>",data.comment[i].user_display_name,"</h4>");
														content = content.concat("<span>",data.comment[i].time_comment,"</spam>");
														content = content.concat("</div>");
														content = content.concat("<div class='comment-detail'>");
														content = content.concat("<p>",data.comment[i].detail_comment,"</p>");
														
														content = content.concat("</div>");
														content = content.concat("</div>");
														content = content.concat("</div>");
														iCountStt++;
													}
													
												
											}
										}else{
										}
										
									}
									$('#comments').append(content);
									$('#loading').css('visibility','hidden');
									reSizeHeigh();
								},
								error:function(data){
									console.log("fail");
								}
							});
		}
	</script>
	<script type="text/javascript"> getComment(); reSizeHeigh();</script>
</body>
<?php }?>
</html>